<template>
  <div>
    <Row>
      <i-col>
        <Form ref="tabParam" :model="tabParam" label-position="right" inline>
          <Row>
            <i-col>
              <FormItem label="箱号：">
                <Input type="text" v-model="tabParam.containerNo" clearable placeholder="请输入箱号"></Input>
              </FormItem>
              <FormItem label="箱属：">
                <Input type="text" v-model="tabParam.userName" clearable placeholder="请输入箱属"></Input>
              </FormItem>
              <FormItem label="箱型">
                <Select v-model="tabParam.containerType" clearable placeholder="请选择箱型" style="width: 200px">
                  <Option v-for="item in containerTypeList" :value="item" :key="item">{{ item }}</Option>
                </Select>
              </FormItem>
              <FormItem style="float:right;">
                <Button type="primary" @click="handleSearch" icon="ios-search">
                  搜索
                </Button>
              </FormItem>
            </i-col>
          </Row>
        </Form>
      </i-col>
    </Row>
    <!--<i-button type="primary" style="margin-bottom:5px;" @click="addContainer">新增箱号</i-button>-->
    <i-button type="error" style="margin-bottom:5px;" @click="batchDelContainer">批量删除</i-button>


    <tablePage ref="orderReportNewTab" :api="getDataByPage" :param="tabParam">
      <template slot-scope="props">
        <Table ref="tableList" :columns="columns7" :data="props.data"></Table>
      </template>
    </tablePage>

    <Modal
      v-model="modal2"
      title="添加箱号">
      <Form ref="ruleForm" :model="ruleForm3" :rules="ruleForm3">
        <FormItem>
          1、下载 <a style="color: #1E9FFF" target="_blank" href="./static/excelTemplate/zxxqTemplate.xlsx">导入模板</a>
        </FormItem>
        <FormItem label="2、导入文件">
          <Upload ref="upload" name="upload" action="//jsonplaceholder.typicode.com/posts/"
                  :format="['xls','xlsx']"
                  :before-upload="handleUploadBeforeUpload"
                  :on-error="handleUploadError"
                  :on-format-error="handleUploadFormatError"
          >
            <Button type="ghost" icon="ios-cloud-upload-outline">上传文件</Button>
            <span>{{uploadFile.name}}</span>
          </Upload>

        </FormItem>
        <FormItem label="* 支持xls、xlsx格式"></FormItem>
        <FormItem label="* 文件大小 <10MB"></FormItem>

        <FormItem>
          <Button type="info" @click="handleSubmit3(ruleForm3)">导入</Button>
        </FormItem>
      </Form>
      <div slot="footer">
      </div>
    </Modal>
  </div>
</template>
<script>
  import tablePage from '@components/table/tablePage.vue'
  import {
    getDataByPage,
    putExcelContainerList,
    batchDeleteContainers,
    getContainersTypeList
  } from '@api/containerPlatform/containerManagement'
  import moment from 'moment'

  export default {
    name: 'containerList',
    data () {
      return {
        // excelTemplate: excelTemplate,
        containerTypeList: [],
        tabParam: {
          containerNo: '',
          userName: '',
          containerType: ''
        },
        getDataByPage,
        modal2: false,
        columns7: [
          {
            type: 'selection',
            width: 60,
            align: 'center'
          },
          {
            title: '箱属',
            key: 'userName'
          },
          {
            title: '箱号',
            key: 'containerNo'
          },
          {
            title: '备案时间',
            render: (h, params) => {
              let thisdata = params.row.recordTime
              thisdata = thisdata ? moment(thisdata).format('YYYY-MM-DD') : ''
              return (<span>{thisdata}</span>)
            }
          },
          {
            title: '箱型',
            key: 'containerType'
          },
          {
            title: '使用者',
            key: 'user'
          },
          {
            title: '操作',
            key: 'action',
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      let id = params.row.id
                      this.dataDelete(id)
                    }
                  }
                }, '删除')
              ])
            }
          }
        ],
        ruleForm: {
          containerNo: ''
        },
        ruleForm2: {
          containerHead: '',
          containerBodyStart: '',
          containerBodyEnd: ''
        },
        ruleForm3: {},
        uploadFile: {
          name: ''
        }
      }
    },
    watch: {
      modal2 () {
        this.ruleForm2 = {
          containerNo: ''
        }
        this.ruleForm = {
          containerHead: '',
          containerBodyStart: '',
          containerBodyEnd: ''
        }
      }
    },
    computed: {},
    methods: {
      handleSearch () {
        this.$refs['orderReportNewTab'].dataRefresh()
      },
      dataDelete (val) {
        this.$Modal.confirm({
          content: '确定删除？',
          onOk: () => {
            batchDeleteContainers({
              ids: val
            }).then(res => {
              console.log(res.data)
              if (+res.data.isSuccess === 1) {
                this.$refs['orderReportNewTab'].dataRefresh()
                this.$Message.info('删除成功')
              } else {
                this.$Message.info(res.data.res)
              }
            })
          }
        })
      },
      batchDelContainer (val) {
        let delControlerList = this.$refs.tableList.getSelection()
        if (delControlerList.length > 0) {
          this.$Modal.confirm({
            content: '确定删除？',
            onOk: () => {
              //  弹窗
              console.log(this.$refs.tableList.getSelection())
              let ids = ''
              for (let i = 0; i < delControlerList.length; i++) {
                ids = ids + delControlerList[i].id + ','
              }
              // console.log(ids[ids.length - 1])
              if (ids[ids.length - 1] === ',') {
                ids = ids.substr(0, ids.length - 1)
              }
              batchDeleteContainers({
                ids: ids
              }).then(res => {
                console.log(res.data)
                if (+res.data.isSuccess === 1) {
                  this.$refs['orderReportNewTab'].dataRefresh()
                  this.$Message.info('删除成功')
                } else {
                  this.$Message.info(res.data.res)
                }
              })
            }
          })
        } else {
          this.$Message.info('未选择删除项！')
        }
      },
      addContainer (val) {
        this.modal2 = true
      },
      handleUploadBeforeUpload (file, fileList) {
        console.log(file)
        let reader = new FileReader()
        reader.readAsDataURL(file)
        const _this = this
        reader.onloadend = function (e) {
          file.url = reader.result
          console.log(file)
          _this.uploadFile = file
        }
        return false
      },
      handleUploadError (e, file, fileList) {
        console.log('uploaderr')
      },
      handleUploadFormatError (e, file, fileList) {
        console.log('handleUploadFormatError')
        this.$Notice.warning({
          title: '文件格式不正确',
          desc: '文件 ' + file.name + ' 格式不正确，请上传 xls 或 xlsx 格式的图片。'
        })
      },
      handleSubmit3 (val) {
        if (this.uploadFile.name === '') {
          console.log('未上传文件')
        }
        let formData = new FormData()
        formData.append('file', this.uploadFile)
        putExcelContainerList(formData).then(res => {
          this.$refs['orderReportNewTab'].dataRefresh()
          alert(res.data.res)
          this.modal2 = false
          console.log(res)
        })
      }
    },
    created () {
    },
    mounted () {
      getContainersTypeList().then(res => {
        if (res.data.isSuccess === 1) {
          this.containerTypeList = res.data.data
        }
      })
    },
    components: {tablePage}
  }
</script>
<style scoped>

</style>
